<!-- NavBarHeader -->
<template>
  <div class="navbarContainer">
    <div class="NavBarHeader">
      <div class="navbarLogo">
        <img
          src="./../assets/img/navbar/logo.png"
          class="hll_logo"
          @click="goHome"
        />
        <div class="navbarBox">
          <div class="navbarList">
            <ul class="navbarUl">
              <li
                v-for="(item, index) in tabName"
                :key="index"
                :class="{ activeClass: currentIndex == index }"
              >
                <router-link
                  :to="{ path: item.toPath, query: { currentIndex: index } }"
                >
                  {{ item.tab }}
                  <span :class="{ activeColor: currentIndex == index }"></span>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="narbarSearch">
            <el-input
              placeholder="请输入内容"
              v-model="input3"
              class="input-with-select"
            >
              <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="机械中心" value="1"></el-option>
              </el-select>
              <!-- 搜索按钮 -->
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="goSearch"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div class="loginBox" v-if="!userInfo">
          <span @click="goLogin">登录</span>
          <span>/</span>
          <span @click="goRegister">注册</span>
        </div>
        <!-- 已登录的状态 -->
        <div class="loginBox" v-if="userInfo">
          <div class="bellIconBox">
            <div class="bellIconMsg">
              <img
                src="./../assets/img/header/bellIcon.png"
                class="bellIcon"
                @click="goMessage"
              />
              <div class="msgBox" v-if="msgNode.length > 0">{{ msgNode }}</div>
            </div>
            <span class="heightStyle"></span>
            <div class="navBarNode" @click="selectData">
              <span class="aiShow">{{
                userInfo.name ? userInfo.name : userInfo.phone
              }}</span>
              <img
                src="./../assets/img/header/selecteIcon.png"
                class="selecteIcon"
              />
              <!-- <img
                src="./../assets/img/header/selecteIcon.png"
                alt=""
                class="aiShow selecteIcon2"
              /> -->
            </div>
            <!-- 消息提示 -->
            <div class="tipsBox" v-if="false">5</div>
          </div>
          <div class="downData">
            <ul>
              <li class="borderStyle" @click="goPersonal">个人中心</li>
              <li @click="goMechanics">维护机械</li>
              <!-- <li>机械天眼</li> -->
              <li @click="goProject">项目管理</li>
              <li class="borderStyle" @click="goService">服务认证</li>
              <li @click="goAccount">账号管理</li>
              <li class="borderStyle" @click="goEnterprise">进入企业版</li>
              <li @click="outLogin">退出</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import { getUnlook } from "./../apis/api.js";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      currentIndex: this.$route.query.currentIndex | 0,
      input3: "",
      select: "机械中心",
      userInfo: {},
      isShow: true,
      hash: "",
      msgNode: "",
      tabName: [
        { id: 0, tab: "首页", toPath: "/" },
        { id: 1, tab: "寻租需求", toPath: "/engineering" },
        { id: 2, tab: "机械中心", toPath: "/mechanicsInfoData" },
        { id: 3, tab: "加入轰隆隆", toPath: "/addUs" },
      ],
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.path == "/Personal") {
        //跳转到哪个页面
        location.reload();
      }
    },
  },
  // 方法集合
  methods: {
    // 页面跳转后有一个页面重新渲染问题所以需要点击两次才能选中当前的导航项
    // 解决:传参的方式给data里的currentIndex赋值
    // 或者存储在vuex里面
    // currentBtn(key, toPath) {
    //   this.$router.push({ path: toPath, query: { currentIndex: key } });
    // },
    goLogin() {
      this.$router.push({ path: "/loginPc" });
    },
    goRegister() {
      this.$router.push({ path: "loginPc", query: { tab: 1 } });
    },
    // 下拉菜单
    selectData() {
      let downData = document.getElementsByClassName("downData")[0];
      if (downData.style.display == "none") {
        document.getElementsByClassName("downData")[0].style.display = "block";
        document.getElementsByClassName("navBarNode")[0].children[1].className =
          "selecteIcon2";
      } else {
        document.getElementsByClassName("downData")[0].style.display = "none";
        document.getElementsByClassName("navBarNode")[0].children[1].className =
          "selecteIcon";
      }
    },
    // 跳转个人中心
    goPersonal() {
      document.getElementsByClassName("downData")[0].style.display = "none";
      document.getElementsByClassName("navBarNode")[0].children[1].className =
        "selecteIcon";
      this.$router.push({ path: "/Personal", query: { navBarIndex: 1 } });
    },
    // 跳转项目管理
    goProject() {
      document.getElementsByClassName("downData")[0].style.display = "none";
      document.getElementsByClassName("navBarNode")[0].children[1].className =
        "selecteIcon";
      this.$router.push({ path: "/Personal", query: { navBarIndex: 2 } });
    },
    // 跳转机械维护
    goMechanics() {
      document.getElementsByClassName("downData")[0].style.display = "none";
      document.getElementsByClassName("navBarNode")[0].children[1].className =
        "selecteIcon";
      this.$router.push({ path: "/Personal", query: { navBarIndex: 3 } });
    },
    // 跳转服务认证
    goService() {
      document.getElementsByClassName("downData")[0].style.display = "none";
      document.getElementsByClassName("navBarNode")[0].children[1].className =
        "selecteIcon";
      this.$router.push({ path: "/Personal", query: { navBarIndex: 4 } });
    },
    // 跳转账号管理
    goAccount() {
      document.getElementsByClassName("downData")[0].style.display = "none";
      document.getElementsByClassName("navBarNode")[0].children[1].className =
        "selecteIcon";
      this.$router.push({ path: "/Personal", query: { navBarIndex: 5 } });
    },
    // 退出登录
    outLogin() {
      localStorage.removeItem("userInfo");
      this.$router.push("/loginPc");
    },
    goSearch() {
      console.log("点击搜索按钮");
      let searchname = this.input3;
      if (!this.input3) {
        this.$message.error("请输入搜索内容");
        return;
      }
      this.$router.push({
        path: "/mechanicsInfoData",
        query: { currentIndex: 2, currentIndex1: 1, searchname },
      });
      // 清除输入框内容
      this.input3 = "";
    },
    // 跳转消息
    goMessage() {
      this.$router.push({ path: "/systemMessage" });
    },
    goHome() {
      window.open("https://www.honglonglong.net/","_self");
    },
    async getUnlook() {
      try {
        let res = await getUnlook();
        if (res.data.result == "1") {
          this.msgNode = res.data.body.un_look;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 跳转企业版
    goEnterprise() {
      window.open("https://rest.honglonglong.com.cn/es/#/Login", "_blank");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getUnlook();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    if (this.userInfo) {
      document.getElementsByClassName("downData")[0].style.display = "none";
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-select {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-input__inner:focus {
  border-color: #dcdfe6;
}
</style>
<style lang='scss' scoped>
.NavBarHeader {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: rgba(31, 35, 39, 0.3);
  display: flex;
  justify-content: center;
}
.navbarBox {
  margin-left: 40px;
  display: flex;
  align-items: center;
}
.navbarLogo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hll_logo {
  width: 106px;
  height: 36px;
  cursor: pointer;
}
.navbarList {
  width: 380px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  li::before {
    content: "";
    position: absolute;
    top: 25px;
    // left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #ff855b;
    transition: 0.2s all linear;
  }

  li:hover::before {
    width: 100%;
    top: 25px;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #ff855b;
    // z-index: -1;
  }

  li:hover {
    left: 0;
    color: #ff855b;
    transition: 0.2s all linear;
  }
  li:active {
    color: #ff855b;
  }
}
.navbarUl {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  margin-right: 30px;
}
.navbarList li {
  // margin-right: 40px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  line-height: 1;
  transition: 0.2s all linear;
}
.loginBox {
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  padding-left: 30px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  span {
    margin-right: 10px;
  }
  .heightStyle {
    width: 1px;
    height: 20px;
    background: #fff;
    margin: 0 19px;
  }
}
.activeClass {
  color: #ff855b !important;
  position: relative;
  font-size: 16px;
  a {
    color: #ff855b !important;
  }
}
.activeColor {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 25px;
  left: 0;
  border-bottom: 2px solid #ff855b;
}
.navBarNode {
  display: flex;
  align-items: center;
  span {
    // width: 150px;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
}
.bellIconMsg {
  position: relative;
}
.msgBox {
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #f56c6c;
  border-radius: 12px;
  position: absolute;
  top: 15px;
  right: 0;
  color: #fff;
  font-size: 10px;
}
.bellIcon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
.selecteIcon {
  width: 18px;
  height: 18px;
}
.selecteIcon2 {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.downData {
  width: 240px;
  max-height: 448px;
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #eeeeee;
  position: absolute;
  top: 100%;
  right: 0px;
  z-index: 1000;
  li {
    height: 55px;
    line-height: 55px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: #303133;
  }
  li:hover::before {
    width: 100%;
    top: 25px;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #ff855b;
    z-index: -1;
    height: 55px;
    // background: #f5f7fa;
  }

  li:hover {
    left: 0;
    color: #ff855b;
    transition: 0.2s all linear;
    height: 55px;
    // background: #f5f7fa;
  }
}
.input-with-select {
  width: 500px;
}
.borderStyle {
  border-bottom: 1px solid #dcdfe6;
}
.bellIconBox {
  display: flex;
  align-items: center;
  position: relative;
}
.tipsBox {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #f56c6c;
  border-radius: 12px;
  font-size: 10px;
}
.router-link-active {
  text-decoration: none;
  color: #f56c6c;
}
.router-link {
  text-decoration: none;
  color: #f56c6c;
}
a {
  text-decoration: none;
  color: #fff;
}
</style>
